<template>
  <div class="title-btns block">
    <el-button type="primary" @click="addClickEvent" v-if="hasAuth(auth, 'plus')">
      {{ $t("ship.button.plus") }}
    </el-button>
  </div>

  <el-table
    stripe
    class="daf-table"
    row-key="id"
    :show-overflow-tooltip="true"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    :data="listData"
    style="width: 100%"
  >
    <el-table-column prop="id" label="Menu ID"> </el-table-column>
    <el-table-column label="Menu Name">
      <template #default="scope">
        <span v-if="scope.row.type == 2">{{scope.row.name }}</span>
        <span v-else-if="scope.row.name">{{scope.row.name}}</span>
      </template>
    </el-table-column>
    <el-table-column label="Icon">
      <template #default="scope">
        <svg-icon :icon-class="scope.row.icon"></svg-icon>
        <span>{{ scope.row.icon }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="order"> </el-table-column>
    <el-table-column label="Menu Type">
      <template #default="scope">
        <el-tag v-if="scope.row.type == 0" type="success">{{ types[scope.row.type] }}</el-tag>
        <el-tag v-if="scope.row.type == 1" type="warning">{{ types[scope.row.type] }}</el-tag>
        <el-tag v-if="scope.row.type == 2" type="danger">{{ types[scope.row.type] }}</el-tag>
      </template>
    </el-table-column>
    <!--    <el-table-column-->
    <!--        label="上级菜单">-->
    <!--      <template #default="scope">-->
    <!--        <span>{{getParentName(scope.row.parentId)}}</span>-->
    <!--      </template>-->
    <!--    </el-table-column>-->
    <el-table-column label="Component Path">
      <template #default="scope">
        <span>{{ scope.row.comPath }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="perms" label="Permission"> </el-table-column>
    <el-table-column prop="createTime" label="Time Created"> </el-table-column>
    <el-table-column prop="updateTime" label="Update Time"> </el-table-column>
    <el-table-column label="Operation">
      <template #default="scope">
        <span v-if="hasAuth(auth, 'edit')" class="btn-primary" @click="editClickEvent(scope.row)">{{
          $t("ship.button.edit")
        }}</span
        >&nbsp;
        <span v-if="hasAuth(auth, 'remove')" class="btn-primary" @click="removeClickEvent(scope.row.id)">{{
          $t("ship.button.remove")
        }}</span>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog
    :width="500"
    destroy-on-close
    :title="dialogTitle"
    v-model="dialogFormVisible"
    draggable
    @close="dialogForm.resetFields()"
  >
    <el-form :model="formParam" :rules="rules" ref="dialogForm">
      <el-form-item  label="Parent Menu" label-width="120px" prop="parentId">
        <el-select v-model="formParam.parentId" clearable filterable>
          <el-option :key="item.id" :label="item.name" :value="item.id" v-for="item in parentMenus"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Menu Type" label-width="120px" prop="type">
        <el-select v-model="formParam.type" placeholder="select Menu Type" @change="changeMenuTypeEvent">
          <el-option :key="index" :label="item" :value="index" v-for="(item, index) in Object.values(types)"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Name" label-width="120px" prop="name">
        <el-input v-model="formParam.name" autocomplete="off" maxlength="50" clearable placeholder="please input name"></el-input>
      </el-form-item>
      <el-form-item label="Icon" label-width="120px" prop="icon">
        <el-select v-model="formParam.icon" filterable clearable>
          <el-option v-for="item in calcIconOptionsiconNames" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <!-- <el-input v-model="formParam.icon" autocomplete="off" maxlength="16" clearable></el-input> -->
      </el-form-item>
      <el-form-item label="Order" label-width="120px" prop="sort">
        <el-input-number v-model="formParam.sort" controls-position="right" :min="1" :max="100"></el-input-number>
      </el-form-item>
 
     
      <el-form-item label="Component Path" label-width="120px" prop="comPath">
        <el-input v-model="formParam.comPath" autocomplete="off" clearable></el-input>
      </el-form-item>
      <el-form-item label="Permission" label-width="120px" prop="perms">
        <el-input v-model="formParam.perms" autocomplete="off" clearable></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button @click="dialogForm.resetFields()" type="warning">Reset</el-button>
        <el-button type="primary" @click="submitForm">Save</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
// @ts-nocheck
import { defineComponent, ref, onMounted, computed } from "vue";
import { ElMessageBox, ElNotification } from "element-plus";
import service from "@/utils/request";
import Auth from "@/components/mixin/auth.js";
import svgIconsNames from "virtual:svg-icons-names";

export default defineComponent({
  name: "MenuManage",
  mixins: [Auth],
  setup() {
    const dialogTitle = ref("新增菜单");
    const dialogFormVisible = ref(false);
    const rules = ref({
      name: [
        { required: true, message: "please input name", trigger: "blur" },
        { min: 1, max: 30, message: "length between 1 to 30 characters", trigger: "blur" }
      ],
      icon: [{ type: "string", message: "please input icon", trigger: "change" }],
      sort: [{ type: "number", required: true, message: "please input order", trigger: "change" }],
      type: [{ type: "number", required: true, message: "please choose menu type", trigger: "change" }],
      comPath: [{ type: "string", message: "please input component path", trigger: "change" }],
      perms: [{ type: "string", message: "please input the request url", trigger: "change" }]
    });
    const types = {
      0: "dictory",
      1: "menu",
      2: "button"
    };
    const initForm = {
      url: "",
      name: "",
      icon: "",
      sort: 0,
      type: 0,
      comPath: "",
      perms: "",
      parentId: null
    };
    let isAdd = false;
    const formParam = ref(Object.assign({}, initForm));
    const dialogForm = ref(null);
    const listData = ref([]);
    const getParentName = parentId => {
      let parentName = "";
      const recursionMenu = menus => {
        for (const n of menus) {
          if (n.children) {
            recursionMenu(n.children);
          }
          if (n.id == parentId) {
            parentName = n.name;
            break;
          }
        }
      };
      recursionMenu(listData.value);
      return parentName;
    };

    const refreshTable = async () => 
     {
        const arr = [];
        listData.value = (await service.get("shipping/sysMenu")).data
        for(const n of listData.value){
          if (n.type === 0  ) arr.push({ id: n.id, name: n.name });
        }
        parentMenus.value = arr
    };
    const parentMenus = ref([]);
    const changeMenuTypeEvent = () => {
      const arr = [];
      const recursionMenu = menus => {
        for (const n of menus) {
          switch (formParam.value.type) {
            case 0:
            if (n.type === 0 && n.name != formParam.value.name) arr.push({ id: n.id, name: n.name });
              break;
            case 1:
              if (n.type === 0 && n.name != formParam.value.name) arr.push({ id: n.id, name: n.name });
              break;
            case 2:
              if (n.type === 1 && n.name != formParam.value.name) arr.push({ id: n.id, name: n.name });
              break;
          }
          if (n.children && n.children.length) {
            recursionMenu(n.children);
          }
        }
      };
      recursionMenu(listData.value);
      parentMenus.value = arr;
      // formParam.value.parentId = null
    };
    const addClickEvent = () => {
      isAdd = true;
      dialogTitle.value = "Add menu";
      dialogFormVisible.value = true;
      Object.assign(formParam.value, initForm);
    };
    let editRowId;
    const editClickEvent = row => {
      isAdd = false;
      dialogTitle.value = "Edit menu";
      dialogFormVisible.value = true;
      Object.keys(initForm).forEach(k => {
        if (row[k] != null) {
          formParam.value[k] = row[k];
        }
      });
      // @ts-ignore
      editRowId = row.id;
      changeMenuTypeEvent();
    };
    const removeClickEvent = id => {
      ElMessageBox.confirm("confirm to delete the menu？", "Confirm message", {
        type: "warning",
        confirmButtonText: "Confirm",
        cancelButtonText: "Cancel"
      }).then(async () => {
        await service.delete(`shipping/sysMenu/${id}`);
        // @ts-ignore
        ElNotification.success({ title: "Information", message: "delete the menu success!", position: "bottom-right" });
        refreshTable();
      });
    };
    const submitForm = () => {
      // @ts-ignore
      dialogForm.value.validate(async flag => {
        if (!flag) {
          // @ts-ignore
          ElNotification.warning({ title: "Information", message: "Verification failed!", position: "bottom-right" });
          return;
        }
        await service[isAdd ? "post" : "put"](isAdd ? "shipping/sysMenu" : `shipping/sysMenu/${editRowId}`, formParam.value);
        // @ts-ignore
        ElNotification.success({
          title: "Prompt information",
          message: "Successfully saved",
          position: "bottom-right",
          duration: 0
        });
        dialogFormVisible.value = false;
        refreshTable();
      });
    };
    onMounted(() => refreshTable());

    // svg名称列表(取icon-xxx)
    const svgNames = (svgIconsNames || [])
      .map((item: any) => {
        return item.replace("icon-", "");
      })
      .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
    const calcIconOptionsiconNames = computed(() => {
      return svgNames.filter(item => item.includes(formParam.icon || ""));
    });
    return {
      listData,
      rules,
      types,
      formParam,
      dialogForm,
      dialogTitle,
      addClickEvent,
      editClickEvent,
      removeClickEvent,
      parentMenus,
      submitForm,
      getParentName,
      dialogFormVisible,
      changeMenuTypeEvent,
      calcIconOptionsiconNames
    };
  }
});
//# sourceMappingURL=menu.js.map
</script>
